<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid;
            background-image: url(./imgs/1.jpg);
            background-size: 100%;
        }
    </style>
</head>
<body>
    <button>点击</button> <div class="box"></div>
    <script>
        var btnEle = document.querySelector("button");
        var boxEle = document.querySelector(".box");
        var imgArr = ['./imgs/1.jpg','./imgs/2.jpg','./imgs/3.jpg'];

        var previous = 0;  //记录上一次的随机索引值；

        btnEle.onclick = function(){
        //   var res =   randomNum(1,3);
        var res = randomNum(0,2);
       
        while(res==previous){
            res = randomNum(0,2);
        }
        console.log(res);
        previous = res;
        //   console.log(res);
        // var str =  `url(./imgs/${res}.jpg)`
        // console.log(str);
        boxEle.style.backgroundImage =`url(${imgArr[res]})`;
        }


        function randomNum(min,max){
            return parseInt( Math.random()*(max+1-min))+min;
        }



    </script>
</body>
</html>